<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>角色列表</span>
            </div>
            <el-table
                :data="form"
                style="width: 100%"
                border
            >
                <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="角色名称"
                >
                </el-table-column>

                <el-table-column
                    prop="title"
                    label="角色标识"
                >
                </el-table-column>

                <el-table-column
                    prop="guard_name"
                    label="守卫名称"
                >
                </el-table-column>
                <el-table-column
                    #default="{row:role}"
                    label="操作">
                    <el-button-group>
                        <el-button size="small" type="primary" @click="edit(role)">编辑</el-button>
                        <el-button size="small" type="danger" @click="del(role)">删除</el-button>
                        <el-button size="small" type="success" @click="setRole(role)">设置权限</el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>

import tabs from './tabs'


export default {
    route:{meta:{title:'角色列表'}},
    data() {
        return {
            tabs,
            form: []
        }
    },
    async created() {
        this.form = await this.axios.get('admin/role');
    },
    methods: {
        async del(role) {
            await this.axios.delete(`admin/role/${role.id}`)
        },
        edit(role) {
            // this.$router.push({name: 'admin.role.edit', params: {id: role.id}})
            this.router('admin.role.edit', {rid: role.id})
        },
        setRole(role) {
            this.router('admin.permission.edit', {rid: role.id})
        }
    }
}
</script>

<style scoped>

</style>
